<template>
  <div>
    <div>
      <el-button @click="()=>{
        router.push('/project/details?handleType=create')
      }">新建</el-button>
    </div>
    <el-table :data="infoDatas">
      <el-table-column label="项目名称" prop="nowInfo.name"></el-table-column>
      <el-table-column label="级别">
        <template #default="scope">
          <el-tag>{{ levelMap[scope.row.nowInfo.level] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否需要第三方">
        <template #default="scope">
          <el-tag>{{ scope.row.nowInfo.needOther ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="目标人群">
        <template #default="scope">
          <el-tag>{{ renderPeopleStr(scope.row.nowInfo.people) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="()=>{
            router.push('/project/details?handleType=view&id='+scope.row.id)
          }">查看</el-button>
          <el-button type="success" @click="()=>{
            router.push('/project/details?handleType=edit&id='+scope.row.id)
          }">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {levelMap} from '@/constant'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const infoDatas = ref([])
const renderPeopleStr = (people) => {
  return people.map(item => item.crowd).join(',')
}

function initData () {
  let data = JSON.parse(localStorage.getItem('infoDatas') != null ? localStorage.getItem('infoDatas') : '[]')
  console.log(data)
  infoDatas.value = data
}

onMounted(()=>{
  initData()
})
const handleDelete = row =>{
  ElMessageBox.confirm(`确定删除${row.name}吗？此操作不可恢复`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    infoDatas.value.splice(infoDatas.value.findIndex(item => item.id === row.id),1)
    localStorage.setItem('infoDatas',JSON.stringify(infoDatas.value))
    ElMessage({
      message: '删除成功',
      type: 'success'
    })

  }).catch(() => {
    console.log('取消删除')
  })
}
</script>

<style scoped>

</style>
